function setup() {

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    _game = new Game(canvas, context);
    context.textAlign = "center";
    // pre-load all needed images before starting game
    var sources = {
        object: "img/IMAGES_OBJECT.png",
        background: "img/background.png",
        welcomescreen: "img/welcomescreen.png",
        castle: "img/castle.png",
        pipe_head: "img/pipe_head.png",
        pipe_body: "img/pipe_body.png",
        SCREEN_ITEMS: "img/SCREEN_ITEMS.png",
        BG_LEVEL: "img/BG_LEVEL.png",
        PAUSE_SCREEN: "img/PAUSE_SCREEN.png",
        INFO_SCREEN: "img/info.png",
        HELP_SCREEN: "img/help.png"
    };
    console.log("Begin load images");
    var loader = new ImgLoader(sources,
        function(image, percent) { // on progressing callback			
            context.fillStyle = "black";
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.style = "50px white";
            context.fillText("Loading: " + percent + "%", canvas.width / 2, canvas.height / 2);
        },
        function(images) { 
            // completed		
            _images = images;
            _welcomeScreen = welcomeScreen(images);
            _helpScreen = helpScreen(images);
            _infoScreen = infoScreen(images);
            // win screen
            _winScreen = winScreen(images);
            _menuScreen = menuScreen(images);
            _gameOverScreen = gameOverScreen(images);
            _gameEndScreen = gameEndScreen(images);

            // events on welcome screen
            // click play button
            _welcomeScreen.items[0].onclick = function() {
                _welcomeScreen.stop();
                _menuScreen.start();
            };

            // play/mute audio
            _welcomeScreen.items[1].onclick = function() {                
                // set sound
                _isMute = this.isMute = !this.isMute;
                _welcomeScreen.items[2].isDraw = _isMute;
                
                if(_isMute)
                    soundManager.stop('theme');
                else
                    soundManager.play('theme');
            };

           
            // level 1
            _menuScreen.items[0].onclick = function() {
                _menuScreen.stop();
                _level = 0;
                try {
                _game.init();
                } catch (err){
                    alert("This level is not exist");
                }
            }
            // level 2
            _menuScreen.items[2].onclick = function() {
                _menuScreen.stop();
                _level = 1;
                try {
                _game.init();
                } catch (err){
                    alert("This level is not exist");
                }
            }
            
            // level 3
            _menuScreen.items[4].onclick = function() {
                //startGame(levelScreen, 2, canvas, context);
                _menuScreen.stop();
                _level = 2;
                try {
                _game.init();
                } catch (err){
                    alert("This level is not exist");
                }
            }
            
            // level 4
            _menuScreen.items[6].onclick = function() {
                //startGame(levelScreen, 2, canvas, context);
                _menuScreen.stop();
                _level = 3;
                try {
                _game.init();
                } catch (err){
                    alert("This level is not exist");
                }
            }
            
            // level 5
            _menuScreen.items[8].onclick = function() {
                _menuScreen.stop();
                _level = 4;
                try {
                _game.init();
                } catch (err){
                    alert("This level is not exist");
                }
            }
            
            // level 5
            _menuScreen.items[10].onclick = function() {
                //startGame(levelScreen, 2, canvas, context);
                _menuScreen.stop();
                _level = 9;
                try {
                _game.init();
                } catch (err){
                    alert("This level is not exist");
                }
            }
        
            _welcomeScreen.start();
        }
    );
}

// welcome screen
function welcomeScreen(images) {
    // Create Welcome Screen
    var screen = new Screen(canvas, true);

    // draw background
    screen.beforeDraw = function(context) {
        context.drawImage(images.welcomescreen, 0, 0, canvas.width, canvas.height);
    };

    // add play button
    screen.addItem(new MenuItem({
        name: "play_button",
        left: 280,
        top: 204,
        width: 256,
        height: 236,
        imageX: 0,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS
    }));

    // add sound button
    screen.addItem(new MenuItem({
        name: "sound",
        left: 460,
        top: 460,
        width: 80,
        height: 85,
        imageX: 257,
        imageY: 176,
        isDraw: true,
        isMute: _isMute,
        image: images.SCREEN_ITEMS
    }));

    // add mute button
    screen.addItem(new MenuItem({
        name: "mute",
        left: 460,
        top: 460,
        width: 80,
        height: 85,
        imageX: 350,
        imageY: 145,
        isDraw: _isMute, // do not show this button
        image: images.SCREEN_ITEMS
    }));

    // add information button
    screen.addItem(new MenuItem({
        name: "info",
        left: 560,
        top: 461,
        width: 76,
        height: 83,
        imageX: 430,
        imageY: 143,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            _welcomeScreen.stop();
            _infoScreen.start();
        }
    }));

    // add help button
    screen.addItem(new MenuItem({
        name: "help",
        left: 660,
        top: 462,
        width: 71,
        height: 80,
        imageX: 257,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            _welcomeScreen.stop();
            _helpScreen.start();
        }
    }));
    
    // map editor
    screen.addItem(new MenuItem({
        name: "help",
        left: 90,
        top: 462,
        width: 93,
        height: 99,
        imageX: 686,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            window.location = "map-editor.html";
        }
    }));
    
    // high score
    screen.addItem(new MenuItem({
        name: "high score",
        left: 230,
        top: 462,
        width: 100,
        height: 109,
        imageX: 542,
        imageY: 86,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            $.getJSON('scores.json', function(json) {
                //alert(json.scores.length);
                $("table tbody").text("");
                for(var i = 0; i < json.scores.length; i++) {
                    $("<tr></tr>").appendTo($("table tbody"))
                                .append("<td>"+ json.scores[i].name+"</td><td>"+json.scores[i].score+"</td>");   
                }
            });
            $("article#load-score").slideDown("slow");
        }
    }));
    
    return screen;
}

// create menu screen
function menuScreen(images) {
    // Create Level Screen
    var screen = new Screen(canvas);
    // draw background
    screen.beforeDraw = function(context) {
        context.drawImage(images.BG_LEVEL, 0, 0, canvas.width, canvas.height);
    };

    var _left;
    var _top;
    // add item
    // 5 level
    for (var i = 1; i < 9; i++) {

        if (i >= 5) {
            _left = 130 * (i - 4);
            _top = 150 * 2;
        } else {
            _left = 130 * i;
            _top = 150;
        }
        
        screen.addItem(new MenuItem({
            name: "level" + i,
            left: _left,
            top: _top,
            width: 118,
            height: 143,
            imageX: 350,
            imageY: 0,
            isDraw: true,
            image: images.SCREEN_ITEMS,
            onclick: function() {
                if(!_isMute) {
                    soundManager.stop("theme");
                    soundManager.play("music");
                }
            }
        }));
        
        // number of level
        screen.addItem(new MenuItem({
            name: "level_number",
            left: _left,
            top: _top + 50,
            size: "40px",
            isDraw: true,
            text: i
        }));
        
    }

    // add back button
    screen.addItem(new MenuItem({
        name: "back-to-welcome",
        left: 100,
        top: 500,
        width: 92,
        height: 91,
        imageX: 257,
        imageY: 79,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _welcomeScreen.start();
        }
    }));
    return screen;
}

// help screen
function helpScreen(images) {
    // create the help screen
    var screen = new Screen(canvas);
    screen.beforeDraw = function(context) {
        context.drawImage(images.HELP_SCREEN, 0, 0, canvas.width, canvas.height);
    };
    var cx = canvas.width / 2;
    // adding the Back button
    // add back button
    screen.addItem(new MenuItem({
        name: "back-to-welcome",
        left: 550,
        top: 500,
        width: 92,
        height: 91,
        imageX: 257,
        imageY: 79,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _welcomeScreen.start();
        }
    }));
    return screen;
}

// info screen
function infoScreen(images) {
    // create the help screen
    var screen = new Screen(canvas);
    screen.beforeDraw = function(context) {
        context.drawImage(images.INFO_SCREEN, 0, 0, canvas.width, canvas.height);
    };
    var cx = canvas.width / 2;
    // adding the Back button
    // add back button
    screen.addItem(new MenuItem({
        name: "back-to-welcome",
        left: 550,
        top: 500,
        width: 92,
        height: 91,
        imageX: 257,
        imageY: 79,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _welcomeScreen.start();
        }
    }));
    return screen;
}

// create win screen
function winScreen(images) {
    // game win screen
    var screen = new Screen(canvas);
    screen.beforeDraw = function(context) {
        context.drawImage(images.PAUSE_SCREEN, 0, 0, canvas.width, canvas.height);
    }

    // add complete text
    screen.addItem( new MenuItem({
        name: "commplete_text",
        left: canvas.width / 2 - 50,
        top: 140,
        size: "110px",
        text: "Complete level",
        isDraw: true
    }));
    // add reset this level button
    screen.addItem(new MenuItem({
        name: "reset_button",
        left: 265,
        top: 460,
        width: 70,
        height: 74,
        imageX: 468,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _game.init();
            //_game.reset();
        }
    }));

    //add nextlevel this level button
    screen.addItem(new MenuItem({
        name: "next_level_button",
        left: 365,
        top: 460,
        width: 70,
        height: 70,
        imageX: 468,
        imageY: 76,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            _level++;
            screen.stop();
            _game.init();
        }
    }));

    // add menu button
    screen.addItem(new MenuItem({
        name: "menu_button",
        left: 465,
        top: 460,
        width: 70,
        height: 76,
        imageX: 538,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _menuScreen.start();
            if(!_isMute) {
                soundManager.stop("music");
                soundManager.play("theme");
            }
        }
    }));
    return screen;
}

// game over screen
function gameOverScreen(images) {
    // game over screen
    var screen = new Screen(canvas);
    screen.beforeDraw = function(context) {
        context.drawImage(images.PAUSE_SCREEN, 0, 0, canvas.width, canvas.height);
    }
    
    // add complete text
    screen.addItem( new MenuItem({
        name: "commplete_text",
        left: canvas.width / 2 - 50,
        top: 120,
        size: "90px",
        text: "Game Over",
        isDraw: true
    }));
    
    // add score text
    screen.addItem( new MenuItem({
        name: "commplete_text",
        left: canvas.width / 2 - 50,
        top: 170,
        size: "30px",
        text: "Scores: " + _score,
        isDraw: true
    }));
    
    // add reset this level button
    screen.addItem(new MenuItem({
        name: "reset_button",
        left: 331,
        top: 460,
        width: 70,
        height: 74,
        imageX: 468,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _live = NUM_LIFE;
            _level = 0;
            _game.init();
        }
    }));
    // add menu button
    screen.addItem(new MenuItem({
        name: "menu_button",
        left: 398,
        top: 460,
        width: 70,
        height: 76,
        imageX: 538,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _menuScreen.start();
            if(!_isMute) {
                soundManager.stop("music");
                soundManager.play("theme");
            }
        }
    }));
    return screen;
}

// game end screen
function gameEndScreen(images) {
    // game over screen
    var screen = new Screen(canvas);
    screen.beforeDraw = function(context) {
        context.drawImage(images.PAUSE_SCREEN, 0, 0, canvas.width, canvas.height);
    }
    
    // add complete text
    screen.addItem( new MenuItem({
        name: "replay",
        left: canvas.width / 2 - 50,
        top: 120,
        size: "90px",
        text: "Replay",
        isDraw: true
    }));
    
    // add complete text
    screen.addItem( new MenuItem({
        name: "replay",
        left: canvas.width / 2 - 50,
        top: 170,
        size: "30px",
        text: "Sorce: " + _score,
        isDraw: true
    }));
    
    // add reset this level button
    screen.addItem(new MenuItem({
        name: "reset_button",
        left: 331,
        top: 460,
        width: 70,
        height: 74,
        imageX: 468,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _game.init();
        }
    }));
    // add menu button
    screen.addItem(new MenuItem({
        name: "menu_button",
        left: 398,
        top: 460,
        width: 70,
        height: 76,
        imageX: 538,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _menuScreen.start();
            //menuScreen(_images).start();
            if(!_isMute) {
                soundManager.stop("music");
                soundManager.play("theme");
            }
        }
    }));
    return screen;
}

// finish
function gameFinishScreen(images) {
    // game over screen
    var screen = new Screen(canvas);
    screen.beforeDraw = function(context) {
        context.drawImage(images.PAUSE_SCREEN, 0, 0, canvas.width, canvas.height);
    }
    
    // add complete text
    screen.addItem( new MenuItem({
        name: "replay",
        left: canvas.width / 2 - 50,
        top: 120,
        size: "90px",
        text: "Congratulation!!!",
        isDraw: true
    }));
    
    // add complete text
    screen.addItem( new MenuItem({
        name: "replay",
        left: canvas.width / 2 - 50,
        top: 170,
        size: "30px",
        text: "Sorce: " + _score,
        isDraw: true
    }));
    
    // add reset this level button
    screen.addItem(new MenuItem({
        name: "reset_button",
        left: 331,
        top: 460,
        width: 70,
        height: 74,
        imageX: 468,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _level = 0;
            _game.init();
        }
    }));
    // add menu button
    screen.addItem(new MenuItem({
        name: "menu_button",
        left: 398,
        top: 460,
        width: 70,
        height: 76,
        imageX: 538,
        imageY: 0,
        isDraw: true,
        image: images.SCREEN_ITEMS,
        onclick: function() {
            screen.stop();
            _menuScreen.start();
            //menuScreen(_images).start();
            if(!_isMute) {
                soundManager.stop("music");
                soundManager.play("theme");
            }
        }
    }));
    return screen;
}